<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>流程定义管理</title>
    <#include "/pubHeadStyleTree.html">
    <link rel="stylesheet" href="${ctx}/css/form.css">
</head>
<body>
<div style="position: relative;height: 100%;">
    <div class="ccpui-trees">
            <p class="isShowTree colorSwitch">
                <span style="float: left;color: #fff">&nbsp;&nbsp;流程分类</span>
                <i layadmin-event="treeFlexible" class="layui-icon layui-icon-prev"></i>
            </p>
            <div style="margin-top: 6px;">
                <ul class="ccpui-iconTree iconTrees">
                    <li><a class="iconfont iconshuaxin- zTree-refresh" title="刷新"></a></li>
                    <li><a class="iconfont iconwenjianjia1-copy zTree-triangle-d" title="展开"></a></li>
                    <li><a class="iconfont iconfolder1 zTree-triangle-r" title="收起"></a></li>
                    <input type="text" style="width: 50%" class="catZtreeValue">
                </ul>
                <ul id="treeSelectGlobalType" class="ztree ccpui-listZtree"></ul>
            </div>
    </div>
    <div class="ccpui-coreContent">
        <table id="actDefModel" lay-filter="actDefModel"></table>
    </div>
            <div class="layui-footer" style="text-align: center;margin-top: 12px;position: absolute;bottom: 2%;left: 50%;">
                <button type="button" class="layui-btn layui-btn-sm" id="choose">选择</button>
                <button type="button" class="layui-btn layui-btn-sm layui-btn-danger" id="returnCol">取消</button>
            </div>
</div>

<script type="text/html" id="headerToolsBar">
    <div class="layui-btn-container">

    </div>
    <form class="layui-form" action="" lay-filter="modelQueryForm" style="margin-top:10px">
        <div class="table-top-filter" style="padding-top:7px;">
            <div class="table-filter-alone">
                <label class="layui-form-label" style="width: 70px">标题</label>
                <input type="text" name="Q_name_SL" id="name" class="layui-input filter-value" placeholder="标题"/>
            </div>
            <a class="layui-btn layui-btn-sm" lay-event="query" style="position: absolute;top: 11px;right: 41px;">
                <i class="layui-icon"></i>
                <span>查询</span>
            </a>
        </div>

    </form>
</script>
<script>
    layui.config({
        base: serverPath.formPath + staticPath.formPath //静态资源所在路径
    }).extend({
        index: 'index' //主入口模块
    }).use(['index', 'table', 'layer', 'laydate', 'form', 'util','commons','setter','totalFilter','common'], function () {
        var table = layui.table;
        var layer = layui.layer;
        var $ = layui.$;
        var setter = layui.setter;
        var commons = layui.commons;
        var common = layui.common;
        var totalFilter = layui.totalFilter;
        var index = parent.layer.getFrameIndex(window.name);
        var tableH='full-70';
        tableH=commons.tabHeight(tableH);

        catZtree();
        loadTable(serverPath.workflowPath + setter.workflowLinkPath + 'actDefModel/list');
        function catZtree() {
            $.ajax({
                url: serverPath.workflowPath + setter.sysLinkPath + "globalType/list",
                type: "post",
                dataType: 'json',
                data: {"catKey": "FLOW_TYPE", "hasRoot": 1},
                success: function (data) {
                    var zNodes = data.data;
                    var setting = {
                        view: {
                            showLine: false,
                            nameIsHTML: true, //允许name支持html
                            selectedMulti: false
                        },
                        edit: {
                            enable: false,
                            editNameSelectAll: false
                        },
                        data: {
                            simpleData: {
                                enable: true,
                                idKey: "typeId",
                                pIdKey: "parentId"

                            },
                            key: {
                                name: "typeName"
                            }
                        },

                        callback: {
                            onClick: onClickType
                        }
                    };
                    $.fn.zTree.init($('#treeSelectGlobalType'), setting, zNodes);
                    component.fuzzySearch('treeSelectGlobalType', '.catZtreeValue', null, true); //初始化模糊搜索方法
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    layer.alert("暂无数据，请稍后操作！" + XMLHttpRequest.status);
                }
            });
        }

        function onClickType(event, treeId, treeNode) {
            var selectTypeId = treeNode.typeId;
            var nodePath = treeNode.nodePath;
            var url = serverPath.workflowPath + setter.workflowLinkPath + 'actDefModel/list?typeId=' + selectTypeId + "&nodePath=" + nodePath;
            if (null == treeNode.parentId) {
                url = serverPath.workflowPath + setter.workflowLinkPath + 'actDefModel/list';
            }
            loadTable(url);
        }


        //展开
        $(".iconTrees .zTree-triangle-d").click(function () {
            $.fn.zTree.getZTreeObj("treeSelectGlobalType").expandAll(true);
        });
        //收起
        $(".iconTrees .zTree-triangle-r").click(function () {
            $.fn.zTree.getZTreeObj("treeSelectGlobalType").expandAll(false);
        });
        //刷新
        $(".iconTrees .zTree-refresh").click(function () {
            catZtree();
        });
        table.on('radio', function (data) {
            var defId = data['data']['id'];
            var subject = data['data']['name'];
            parent.$('#subject').val(subject);
            parent.$('#defId').val(defId);
        });

        $("#choose").on('click', function (data) {
            parent.layer.close(index);
        });
        $("#returnCol").on('click', function () {
            parent.layer.close(index);
        });

        function loadTable(url){
            table.render({
                elem: '#actDefModel'
                , cellMinWidth: 80
                , title: '流程定义模型'
                , height: 'full-60'
                , url: url
                , method: 'post'
                , toolbar: '#headerToolsBar'
                ,defaultToolbar:[]
                , page: true
                , cols: [[
                    {type: 'radio'}
                    , {field: 'name', title: '标题', sort: true, align: 'center'}
                    , {field: 'typeName', title: '分类', sort: true, align: 'center'}
                    , {field: 'version', title: '版本号', align: 'center',width:80}
                    , {
                        field: 'status', title: '发布状态', align: 'center', templet: function (d) {
                            var status = d.status;
                            switch (status) {
                                case 0:
                                    return "未发布";
                                case 1:
                                    return "发布";
                                case 2:
                                    return "禁用";
                                case 3:
                                    return "禁用，并禁用实例";
                                case 4:
                                    return '<span style="color:green;">'+'测试'+'</span>';
                            }
                        }
                    }
                ]]
            });
            totalFilter.init('actDefModel');
        }
        table.on('toolbar(actDefModel)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            var data = checkStatus.data; //获取选中行数据
            switch (obj.event) {
                case 'query':
                    common.tableConditionRender("actDefModel","modelQueryForm",{where:{}},false);
                    break;
            }
        });
    });
</script>
<style>
    .layui-table-tool-temp{
        padding-right:0;
    }
</style>
</body>
</html>